import { connect } from 'umi';
import { Form, Input, Button, InputNumber } from 'antd';
import { useEffect } from 'react';
import './employee.css';

function EmployeeInfo({
  employeeList,
  dispatch,
  match: {
    params: { key },
  },
}) {
  useEffect(() => {
    dispatch({
      type: 'employeeList/getAll',
    });
  }, []);
  const [form] = Form.useForm();
  const employee = employeeList.find((e) => parseInt(e.key) === parseInt(key));
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  function submit() {
    const newEmployee = {
      ...employee,
      firstName: form.getFieldValue('firstName'),
      lastName: form.getFieldValue('lastName'),
      age: form.getFieldValue('age'),
      address: form.getFieldValue('address'),
    };
    dispatch({
      type: 'employeeList/updateList',
      employee: newEmployee,
    });
  }
  form.setFieldsValue(employee);
  return (
    <Form {...layout} form={form} name="basic" className="employee">
      <Form.Item
        label="FirstName"
        name="firstName"
        rules={[{ required: true, message: 'Please input your firstName!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="LastName"
        name="lastName"
        rules={[{ required: true, message: 'Please input your lastName!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Age"
        name="age"
        rules={[{ required: false, message: 'Please input your Age!' }]}
      >
        <InputNumber />
      </Form.Item>

      <Form.Item
        label="Address"
        name="address"
        rules={[{ required: false, message: 'Please input your address!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit" onClick={() => submit()}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}
export default connect(({ employeeList }) => ({ employeeList }))(EmployeeInfo);

// export default function Employee({
//   match: {
//     params: { id },
//   },
// }) {
//   return (
//     <div>
//       <h1>Employee {id} 's Page</h1>

//       <div>
//         <input
//           value={newUserName}
//           onChange={(e) => setNewUserName(e.target.value)}
//         />
//         <button onClick={updateUserHandler}>更新用户姓名</button>
//       </div>
//     </div>
//   );
// }
